<template>
  <div class="box" id="vm6">
    <div class="box-header">
      <span class="title pos-left">{{title}}</span>
      <ul class="tools pos-right">
        <li class="item">
          <button class="btn" type="button" @click="showSettingWindow">
            <i class="icon icon-setting"></i>
          </button>
        </li>
      </ul>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-party-6"></div>
      <div class="chartSetting" v-show="showSetting">
        <div class="form">
          <div class="form-head">
            <div class="title">选择时间范围</div>
          </div>
          <div class="form-body">
            <div class="form-item">
              <div class="label">开始时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  id="startTime"
                  :max="timeLimit"
                  :min="timeMin"
                  v-model="startTime"
                >
              </div>
            </div>
            <div class="form-item">
              <div class="label">结束时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  id="endTime"
                  :max="timeLimit"
                  :min="timeMin"
                  v-model="endTime"
                >
              </div>
            </div>
          </div>
          <div class="form-foot">
            <button type="button" @click="saveSetting" class="btn bg-green">
              <span class="text">确定</span>
            </button>
            <button type="button" @click="cancelSetting" class="btn bg-green">
              <span class="text">关闭</span>
            </button>
          </div>
        </div>
      </div>
      <x-loading :show="showLoading"></x-loading>
      <dl-Meeting ref="dialog" :show="showModal" :take="keyModal"></dl-Meeting>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import dlMeeting from "@/view/party/dl_Meeting";

export default {
  data() {
    return {
      timeLimit: this.today(),
      timeMin:this.dateShift(-365),
      startTime: this.dateShift(-365),
      endTime: this.today(),
      showSetting: false,
      showLoading: false,
      chartInstance: null,
      option: null,
      dataMsg:{},
      params: null,
      showModal: false,
      keyModal: null
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading,
    "dl-Meeting": dlMeeting
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    showSettingWindow() {
      //打开设置窗口
      this.showSetting = true;
    },
    cancelSetting() {
      //关闭设置窗口
      this.showSetting = false;
    },
    saveSetting() {
      //保持关闭窗口
      this.renderChart();
      this.showSetting = false;
    },
    renderChart() {
      let $this = this;
      let dataMsg={
        name:null,
        value:null
      };
      let params = {
        startTime: this.startTime + " 00:00:00",
        endTime: this.endTime + " 23:59:59"
      };
      this.showLoading=true
      axios
        .get(this.URLHEAD + "HYQZPagePro", {
          params: params
        })
        .then(res => {
        let data = res.data;
         this.option = {
          legend: {
            top: 20,
            left: 20,
            textStyle: {
              color: "#fff"
            },
            data: ["签章数量", "未签章数量"],
            itemWidth: 10,
            itemHeight: 10
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true
          },

          tooltip: {
            show: "true",
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },

          xAxis: {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true
            }
          },
          yAxis: [
            {
              type: "category",
              axisTick: { show: false },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff"
                }
              },
              data: data.Data.map(item => {
                return item.name;
              })
            }
          ],
          series: [
            {
              name: "签章数量",
              stack: "总量",
              type: "bar",
              itemStyle: {
                normal: {
                  show: true,
                  borderWidth: 0,
                  borderColor: "#333",
                  color: "#00ccff",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff"
                    },
                    position: "inside",
                    formatter: function(p) {
                      return p.value > 0 ? p.value : "";
                    }
                  }
                }
              },
              barGap: "0%",
              barCategoryGap: "50%",
              data: data.Data.map(item => {
                return item.complete;
              })
            },
            {
              name: "未签章数量",
              stack: "总量",
              type: "bar",
              itemStyle: {
                normal: {
                  show: true,
                  borderWidth: 0,
                  borderColor: "#333",
                  color: "#f99a04",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff"
                    },
                    position: "inside",
                    formatter: function(p) {
                      return p.value > 0 ? p.value : "";
                    }
                  }
                }
              },
              barGap: "0%",
              barCategoryGap: "50%",
              data: data.Data.map(item => {
                return item.notComplete;
              })
            }
          ]
        };
          this.chartInstance = this.$Crender('chart-party-6',this.option)
          this.chartInstance.on("click", e => {
            console.log(e);
            let type = e.name;
            $this.keyModal=type
            $this.$refs.dialog.query(type)
          });
          this.showLoading = false;
        });
    }
  }
};
</script>